<template>
    <div class="">
        <a-button type="primary" @click="router.back()" title="返回">
            <rollback-outlined />
        </a-button>
        <div class="search-header">
            <div>
                tags:
                <a-select
                    v-model:value="select_obj.list"
                    :options="select_obj.options"
                    mode="multiple"
                    placeholder="选择图片tag标签"
                    style="width: 500px"
                    @change="select_obj.change"
                ></a-select>
                总数: {{ total }}
            </div>
            <div>
                <a-button :type="mode == 'list' ? 'primary' : undefined" @click="mode = 'list'" style="margin-right: 5px"
                    ><unordered-list-outlined
                /></a-button>
                <a-button :type="mode == 'img' ? 'primary' : undefined" @click="mode = 'img'"><appstore-outlined /></a-button>
            </div>
        </div>

        <div>
            <div v-if="mode == 'list'">
                <a-row class="list-header">
                    <a-col class="list-header-item" :span="4">_id</a-col>
                    <a-col class="list-header-item" :span="4">dirname</a-col>
                    <a-col class="list-header-item" :span="4">是否发布</a-col>
                    <a-col class="list-header-item" :span="4">引用数</a-col>
                    <a-col class="list-header-item" :span="6">tags</a-col>
                </a-row>
                <a-list :dataSource="img_list">
                    <template #renderItem="{ item }">
                        <a-list-item>
                            <a-row style="width: 100%">
                                <a-col :span="4">{{ item._id }}</a-col>
                                <a-col :span="4">{{ item.dirname }}</a-col>
                                <a-col :span="4">{{ item.is_pub }}</a-col>
                                <a-col :span="4">{{ item.usenum }}</a-col>
                                <a-col :span="6">{{ item.tags }}</a-col>
                            </a-row>
                        </a-list-item>
                    </template>
                </a-list>
            </div>
            <div v-else-if="mode == 'img'">
                <div class="list-row">
                    <div v-for="item in img_list" :key="item._id">
                        <a-card :title="item.dirname" style="margin-bottom: 10px">
                            <a-image v-if="item.local.length > 0" :src="item.local" />
                            <a-image v-else :src="'http://47.242.48.44:9000/' + item.remote" />
                        </a-card>
                    </div>
                </div>
            </div>

            <!-- 加载更多 -->
            <div v-if="loading" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                <a-button @click="onLoadMore">loading more</a-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { RollbackOutlined, UnorderedListOutlined, AppstoreOutlined } from "@ant-design/icons-vue";
    import { dirListApi } from "@/api/imgStore";
    import { ES } from "@/api/esSearch";
    import { useRouter } from "vue-router";
    import { useDebounceFn } from "@vueuse/core"; // 防抖函数

    const router = useRouter();

    const es = new ES("90"); // es实例

    const must: Array<Record<string, any>> = [];
    // 初始化查询条件
    const body = reactive({
        size: 20,
        from: 0,
        query: { bool: { must: must } }
    });
    const total = ref(0);

    // 获取目录id
    const id = parseInt(router.currentRoute.value.params.id.toString());
    const dirname = ref("");
    let term_dirname = { term: { "dirname.keyword": { value: dirname.value } } };
    // 获取当前目录标签
    dirListApi({}, "get", id).then((res) => {
        const result = res.data;
        if (result.code == 200) {
            dirname.value = result.dirname;
            term_dirname = { term: { "dirname.keyword": { value: dirname.value } } };
            // @ts-ignore
            body.query.bool.must.push(term_dirname);
            get_img_list();
            const tags = result.tags;
            select_obj.options = tags.split(",").map((item: string) => {
                return { label: item, value: item };
            });
        }
    });

    // 选择框
    const select_obj = reactive({
        list: [],
        options: [],
        change: () => {
            body.size = 20;
            body.from = 0;
            if (select_obj.list.length == 0) {
                body.query.bool.must = [term_dirname];
            } else {
                body.query.bool.must = [term_dirname, { terms: { "tags.keyword": select_obj.list } }];
            }
            img_list.value = [];
            debouncedFn();
        }
    });

    // 图片模式或列表模式
    const mode = ref("list");

    // 获取图片列表
    const img_list: Ref<any[]> = ref([]);
    // 加载更多
    const loading = ref(true);
    const onLoadMore = () => {
        body.from += body.size;
        get_img_list();
    };

    // 发送请求图片列表
    const get_img_list = () => {
        loading.value = false;
        es.search("img_system", body).then((res) => {
            get_img_count();
            loading.value = true;
            img_list.value = res.data.data.hits.hits.map((item: any) => ({
                _id: item._id,
                ...item._source
            }));
        });
    };

    // 图片计数
    const get_img_count = () => {
        es.count("img_system", { query: body.query }).then((res) => {
            const result = res.data.data;
            total.value = result.count;
        });
    };

    const debouncedFn = useDebounceFn(get_img_list, 1000); // 防抖请求
</script>

<style lang="scss" scoped>
    .search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;
    }

    .list-header {
        width: 100%;
        border-bottom: 1px solid #ccc;
        padding: 10px;
    }

    .list-header-item {
        font-weight: bold;
    }

    .list-row {
        column-count: 4;
    }
</style>
